<template>
  <div class="status-display">
    <div class="status-item">
      <span class="label">站区：</span>
      <span class="value">{{ position.LineName || '' }}</span>
    </div>
    <div class="status-item">
      <span class="label">杆号：</span>
      <span class="value">{{ position.POL || '' }}</span>
    </div>
    <div class="status-item">
      <span class="label">公里标：</span>
      <span class="value">{{ position.KMV || '' }}</span>
    </div>
    <!-- <div class="status-item">
      <span class="label">连接状态：</span>
      <div class="status-indicator" :class="isConnected ? 'connected' : 'disconnected'"></div>
      <span class="value">{{ isConnected ? '已连接' : '未连接' }}</span>
    </div> -->
    <div class=""> 
    
      <el-icon><SuitcaseLine /></el-icon>
    
    </div>
    <div class="actions">
      <el-icon @click="$emit('openSettings')" size="28px" class="setting-button">
        <Tools />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PositionData } from '@/types/chart'
import { Tools } from '@element-plus/icons-vue'

interface Props {
  position: PositionData
  isConnected: boolean
}

defineProps<Props>()

defineEmits<{
  openSettings: []
}>()
</script>

<style scoped>
.status-display {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  gap: 30px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  color: rgba(255, 255, 255, 0.8);
}

.value {
  color: white;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.status-indicator.connected {
  background-color: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
}

.status-indicator.disconnected {
  background-color: #f56c6c;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
}

.actions {
  margin-left: auto;
}

.setting-button {
  cursor: pointer;
  transition: color 0.3s;
}

.setting-button:hover {
  color: #409eff;
}
</style>